<script setup lang="ts">
import { useTextSelection } from '@vueuse/core'
const { rects, text } = useTextSelection()
</script>

<template>
  <div ref="demo" class="useTextSelection">
    <p>
      You can select any text on the page.
    </p>
    <p>
      <strong>选择的文字信息:</strong>
      <em>{{ text || 'No selected' }}</em>
    </p>
    <p>
      <strong>Selected rects:</strong>
      <pre lang="json">{{ rects }}</pre>
    </p>
  </div>
</template>

<style lang="scss" scoped>
.useTextSelection {
  background-color: #999999;
  padding: 24px;
}
</style>
